<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>全国各地城市实时天气预报查询HTML5网页模板</title>
    <meta name="keywords" content="全国各地,城市,实时天气,预报,查询,HTML5网页模板" />
    <meta name="description" content="全国各地城市实时天气预报查询HTML5网页模板下载。左上输入想要查询的城市（支持市和县），点击查询即可获取当天及未来5天的天气预报。" />
    <link rel="stylesheet" href="css/weather.css" />
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <header>
        <h1>天气预报</h1>
        <div id="weather_search">
            <span><input id="text" type="text" placeholder="请输入您要查询的城市" /></span>
            <span><input id="btn" type="button" value=" 查询天气" /></span>
        </div>
    </header>
    <section>
        <div id="today_container">

        </div>

        <div id="future_container">

        </div>
    </section>
    <script>
        //入口函数
        $(function () {
            //给查询天气添加点击事件
            $('#btn').on('click', function () {
                // 获取input的值并声明两个空变量方便添加html结构
                let weather = $('#text').val().trim()
                let html = '';
                let six = '';
                //用ajax获取数据
                $.ajax({
                    type: 'get',   //type默认就是获取get
                    url: 'http://api.tianapi.com/txapi/tianqi/index',  //端口
                    data: {   //参数
                        key: 'db9e6f58c8a9961d9d5d272298a42a19',
                        city: weather
                    },
                    beforeSend: function () {   //发送请求前回调函数
                        if (weather.length == 0) {    //判断值为空时返回
                            alert('请输入您要查询的城市')
                            return false;
                        }
                    },
                    success: function (data) {   //请求成功时回调函数
                        //当天
                        console.log(data);
                        let frist = data.newslist[0];  //获取当天的值
                        let two = data.newslist    //获取所有天气数据
                        //动态渲染结构添加到页面上
                        html += `    <div>     
                            <img src="cucumber/${frist.weatherimg}" id="today_img" alt="今日天气" />
                        </div>
                        <div>
                            <div class="main_info">
                                <span class="info" id="today_city">${frist.area}</span>|
                                <span class="info" id="today_date">${frist.date}</span>|
                                <span class="info" id="today_week">${frist.week}</span>|
                                <span class="info" id="today_other">${frist.weather}</span>
                            </div>
                            <div class="more_info">
                                今日温度：<span class="info" id="today_wd">${frist.real}</span>
                                风力：<span class="info" id="today_fl">${frist.windsc}</span>
                                风向：<span class="info" id="today_fx">${frist.wind}</span>
                                降雨量：<span class="info" id="today_pm">${frist.pcpn}</span>
                            </div>
                            <div class="more_info" style="margin-left:150px">
                                紫外线强度：<span class="info" id="today_zwx">${frist.uv_index}</span>
                                能见度：<span class="info" id="today_xc">${frist.vis}</span>
                                相对湿度:<span class="info" id="today_gm">${frist.humidity}</span>
                                降雨概率：<span class="info" id="today_cy">${frist.pop}</span>
                            </div>
                            <div class="more_info" style="margin-left:150px">
                                生活指数提示：<span class="info" id="tips">${frist.tips}</span>
                            </div>
                        </div>
                        `
                        $('#today_container').html(html)
                        //后六天
                        //for循环遍历出后六天的值并动态渲染结构添加到页面上
                        for (let i = 1; i < data.newslist.length; i++) {
                            console.log(two[i]);
                            six += `       <div class="future_box">
                                    <img src="cucumber/${two[i].weatherimg}" alt="天气" />
                                    <span class="future_info">${two[i].date}</span>
                                    <span class="future_info">${two[i].week}</span>
                                    <span class="future_info">--</span><span class="future_info">${two[i].lowest}-${two[i].highest}</span>
                                </div>
                            `
                            $('#future_container').html(six)
                        }
                    },
                    //如果服务器出错时，弹出提示框
                    error: function (err) {
                        alert('服务器开小差了，请再次输入城市名称')
                    }
                })
            })
        })
    </script>
</body>

</html>